<template>
  <Echart height="300px" width="100%" :options="options"/>
</template>

<script>
import Echart from '@/components/echart'
export default {
  components: { Echart },
  mixins:[resize],
  props: {
    cdata: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null,
      options: null,
      color:['#4b6eef','#3abf81']
    }
  },
  watch: {
    cdata: {
      handler(newValue) {
        this.options = {
          color:[`${newValue.color}`,'#EAEAEA'],
          title:{
            text:newValue.title,
            bottom:'8%',
            left:'24%',
            textStyle:{
              color:'#333'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient:'vertical',
            right: '6%',
            bottom: 'middle',
            data: [{name:'正常',icon:'circle'},{name:'异常',icon:'circle',color:'red'}],
          },
          series: [
            {
              name: 'HTTP同步数据',
              type: 'pie',
              radius: ['40%', '60%'],
              center:['40%','40%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              colorBy:this.color,
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data:newValue.data,
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
